<script setup>
import {ref} from 'vue'
import TreeSelectorDept from "@/components/TreeSelectorDept.vue";

let usersArr = ref([]);
let search_realName=ref('');


for (let i = 1; i <= 10; i++) {
  let user = {};
  user.realName = i+"_user";
  user.title = "教师";
  user.eduHistory = "研究生";
  user.diploma = "博士";
  user.birth = "1982-7-7";
  user.faceImg = "/upload/1.jpg";

  usersArr.value.push(user);

}
console.log(usersArr)


function nodeClick(a,b){
  console.log(a)
}
</script>

<template>
  <div style="width: 100%;height: 100%;background: #fff">
    <div class="deptContainer">
      <TreeSelectorDept @treeNodeClick="nodeClick"></TreeSelectorDept>
    </div>
    <div class="contentContainer">
      <div class="searchContainer">
        姓名：<a-input style="width:120px" v-model="search_realName"></a-input>{{search_realName}}
        <a-button type="primary">查询</a-button>
      </div>
      <ul class="userList">
        <li v-for="user in usersArr">
          <div>
            <img src="../../assets/yao.jpeg" class="userImg" :title="user.realName" :alt="user.realName"/>
          </div>
          <div style="margin-left: 5px;">
            <table class="userInfo">
              <tbody>
              <tr>
                <th style="color: #315995">
                  {{ user.realName }}
                </th>
              </tr>
              <tr>
                <td>
                  {{ user.title }}, {{ user.diploma }}, {{ user.eduHistory }}
                </td>
              </tr>
              <tr>
                <td>
                  {{ user.birth }}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.userList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  background: #FFFFFF;
}

.userList li {
  height: 120px;
  width: 300px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #96c1ff;
}

.userList li div {
  float: left;
  font-family: "宋体", "Times New Roman", Times, serif;
  font-size: 13pt;
}

.userImg {
  height: 120px;
  width: 90px;
}

.userInfo {
  width: 100%;
}

.userInfo th, td {
  height: 30px;
}

.deptContainer{
  width:300px;
  height: 100%;
  float: left;
  border-right: 1px dashed #afafaf;
  margin-right: 5px;
}

.contentContainer{
  float:left;
  width:calc(100% - 310px);
}

.searchContainer{
  height: 60px;
  line-height: 60px;
}
</style>